import type { MenuProps } from "antd";
import { useMemo } from "react";
import { useNavigate } from "react-router-dom";
import { Modal, Dropdown } from "antd";
import { useTranslation } from "react-i18next";
import { useAliveController } from "react-activation";
import { useCommonStore } from "@/hooks/useCommonStore";
import { useMenuStore, useTabsStore } from "@/stores";
import { MenuFoldOutlined, MenuUnfoldOutlined, LogoutOutlined, ExclamationCircleOutlined } from "@ant-design/icons";
import Avatar from "@/assets/images/avatar.png";
import styles from "../index.module.less";
import Nav from "./Nav";
import Fullscreen from "@/components/Fullscreen";
import Theme from "@/components/Theme";

type MenuKey = "password" | "logout";

function Header() {
    const { t } = useTranslation();
    const { clear } = useAliveController();
    const [modal, contextHolder] = Modal.useModal();
    const { isCollapsed, username, nav, isMaximize } = useCommonStore();
    const navigate = useNavigate();
    const { closeAllTab, setActiveKey } = useTabsStore((state) => state);
    const toggleCollapsed = useMenuStore((state) => state.toggleCollapsed);

    // 下拉菜单内容
    const items: MenuProps["items"] = [
        {
            key: "logout",
            label: <span>{t("public.signOut")}</span>,
            icon: <LogoutOutlined className="mr-1" />,
        },
    ];

    /** 点击菜单 */
    const onClick: MenuProps["onClick"] = (e) => {
        switch (e.key as MenuKey) {
            case "logout":
                handleLogout();
                break;
            default:
                break;
        }
    };

    /** 退出登录 */
    const handleLogout = () => {
        modal.confirm({
            title: t("public.kindTips"),
            icon: <ExclamationCircleOutlined />,
            content: t("public.signOutMessage"),
            onOk() {
                closeAllTab();
                setActiveKey("");
                clear(); // 清除keepalive缓存
                navigate("/login");
            },
        });
    };

    /** 右侧组件抽离减少重复渲染 */
    const RightRender = () => {
        return useMemo(
            () => (
                <div className="flex items-center">
                    <Theme />
                    <Fullscreen />
                    <Dropdown className="min-w-50px" menu={{ items, onClick }}>
                        <div className="ant-dropdown-link flex items-center cursor-pointer" onClick={(e) => e.preventDefault()}>
                            <img src={Avatar} width={27} height={27} alt="Avatar" className="rounded-1/2 overflow-hidden object-cover bg-light-500" />
                            <span className="ml-2 text-15px min-w-50px truncate">{username || "admin"}</span>
                        </div>
                    </Dropdown>
                </div>
            ),
            // eslint-disable-next-line react-hooks/exhaustive-deps
            [username]
        );
    };

    /** icon渲染 */
    const IconRender = () => {
        return (
            <div className="text-lg cursor-pointer" onClick={() => toggleCollapsed(!isCollapsed)}>
                {isCollapsed && <MenuUnfoldOutlined />}
                {!isCollapsed && <MenuFoldOutlined />}
            </div>
        );
    };

    return (
        <>
            {contextHolder}
            <header
                className={`
                    border-bottom
                    flex
                    items-center
                    justify-between
                    px-6
                    py-6px
                    box-border
                    transition-all
                    ${styles["header-driver"]}
                    ${isMaximize ? styles.none : ""}
                `}
            >
                <div className="flex item-center">
                    <IconRender />
                    <Nav className="ml-15px" list={nav} />
                </div>

                <RightRender />
            </header>
        </>
    );
}

export default Header;
